<template>
  <el-table
    :key="tableKey"
    v-model="selection"
    v-loading="loading"
    :data="list"
    border
    fit
    highlight-current-row
    style="width: 100%;"
    @sort-change="sortChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column v-if="columnVisibilityMap['ID']" label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
      <template slot-scope="{row}">
        <span>{{ row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="columnVisibilityMap['ParentNode']" prop="parentNode" label="父节点" sortable="custom" width="150px" align="center">
      <template slot-scope="{row}">
        <span>{{ row.parentNode }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="columnVisibilityMap['SonSystem']" prop="sonSystem" label="子系统" sortable="custom" min-width="150px">
      <template slot-scope="{row}">
        <span class="link-type" @click="handleUpdate(row)">{{ row.sonSystem }}</span>
        <el-tag>{{ row.sonSystem }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column v-if="columnVisibilityMap['Api']" label="Api" width="110px" align="center">
      <template slot-scope="{row}">
        <span>{{ row.api }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="columnVisibilityMap['ResourceType']" prop="resourceType" label="资源类型" width="80px">
      <template slot-scope="{row}">
        <span>{{ row.resourceType }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="columnVisibilityMap['OpenPic']" prop="openPic" label="打开图标" align="center" width="95">
      <template slot-scope="{row}">
        <span v-if="row.OpenPic" class="link-type" @click="handleFetchPv(row.OpenPic)">{{ row.OpenPic }}</span>
        <span v-else>0</span>
      </template>
    </el-table-column>
    <el-table-column v-if="columnVisibilityMap['ClosePic']" prop="closePic" label="关闭图标" class-name="status-col" width="100">
      <template slot-scope="{row}">
        <el-tag :type="row.closePic| statusFilter">
          {{ row.closePic }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column v-if="columnVisibilityMap['Actions']" label="操作" align="center" width="230" class-name="small-padding fixed-width">
      <template slot-scope="{row,$index}">
        <el-button type="primary" size="mini" @click="handleUpdate(row)">
          编辑
        </el-button>
        <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
